<template>
  <div>
    <el-form
      :inline="true"
      :show-message="false"
      :hide-required-asterisk="true"
      :model="fromdata"
      label-width="90px"
      label-position="right"
    >
      <el-row class="">
        <el-col :span="22">客户车辆列表</el-col>
      </el-row>
      <el-divider content-position="center"></el-divider>
      <el-row>
        <data-table
          :value="tableData"
          :total-count="totalCount"
          :has-action="false"
          :table-column-attributes="tableColumnAttributes"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :width="160"
        >
        </data-table>
      </el-row>
    </el-form>
    <el-form
      :inline="true"
      ref="fromdata"
      :show-message="false"
      :hide-required-asterisk="true"
      :model="fromdata"
      label-width="90px"
      label-position="right"
    >
      <el-row class="">
        <el-col :span="22">车辆信息</el-col>
      </el-row>
      <el-divider content-position="center"></el-divider>
      <el-row>
        <el-col :span="8">
          <el-form-item label="车牌号:">
            <div>{{fromdata.licensePlateNumber}}</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="VIN码:">
            <div>{{fromdata.vin}}</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="车型:">
            <div>{{fromdata.carModelName}}</div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="车辆属性:">
            <div>{{fromdata.carAttribute}}</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="车辆颜色:">
            <div>{{fromdata.carColor}}</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="当前里程:">
            <div>{{fromdata.mileage}}</div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="发动机号:">
            <div>{{fromdata.engineNumber}}</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="注册时间:">
            <div>{{fromdata.drivingPermitDate}}</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="保险公司:">
            <div>{{fromdata.companyName}}</div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="保险投保期:">
            <div>{{fromdata.insureDate}}</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="保险到期:">
            <div>{{fromdata.insureExpireDate}}</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="年审到期:">
            <div>{{fromdata.examinedDate}}</div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="创建日期:">
            <div>{{fromdata.createTime}}</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="备注:">
            <div>{{fromdata.remark}}</div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
  import { clientCarList, getClientCarById } from '@/api/after-sale/client/car'
  import baseMixin from '@/mixins/base'

  export default {
    name: 'carInfo',
    components: { },
    props: {
      value: {
        type: Object,
        default: () => ({})
      }
    },
    mixins: [
      baseMixin({
        findData: clientCarList,
        dataName: ['content', 'totalRecords'],
        idName: 'id',
        format(res) {
          return res.map(data => {
            return data
          })
        }
      })
    ],
    data() {
      return {
        notQuery: true,
        fromdata: {},
        tableColumnAttributes: [
          { name: '所属门店', value: 'storeName', type: 'text' },
          { name: '车牌号', value: 'licensePlateNumber', type: 'text' },
          { name: '品牌', value: 'carBrandName', type: 'text' },
          { name: '车系', value: 'carSeriesName', type: 'text' },
          { name: '年款', value: 'timeType', type: 'text' },
          { name: '车型', value: 'carModelName', type: 'text' },
          { name: '车色', value: 'carColor', type: 'text' },
          { name: '里程数', value: 'mileage', type: 'text' },
          { name: '交强险公司', value: 'companyName', type: 'text' },
          { name: '交强险到期', value: 'insureExpireDate', type: 'text' },
          { name: '备注', value: 'remark', type: 'text' },
          { name: '录入时间', value: 'createTime', type: 'text' },
        ],
        form: {
          clientId: this.value.clientId
        }
      }
    },
    async created() {
      this.search()
      const { data } = await getClientCarById(this.value.clientCarId)
      this.fromdata = data
    },
    methods: {
      search() {
        this.searchOptions = this.form
        this.currentPage = 1
        this.notQuery = false
        // this.setTableData()
      },
      changeType(item){
        this.selectedTypeText = item.label;
      },
    },
    mounted() {
    }
  }
</script>

<style lang="scss" scoped>
  .el-table .delete-row {
    background: #f5f7fa;
    color: #ccc!important;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 80px;
    height: 80px;
    display: block;
  }
</style>
